<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <title>UNM-Server</title>
  <link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" />
  <style>
    :root {
      --text-color: #000;
      --text-color-gray: #888;
      --text-color-hover: #fff;
      --icon-color: #444;
    }

    html.dark-mode {
      --text-color: #fff;
      --text-color-gray: #888;
      --text-color-hover: #3c3c3c;
      --icon-color: #cbcbcb;
    }

    * {
      margin: 0;
      padding: 0;
      -webkit-user-select: none;
      user-select: none;
    }

    html {
      height: 100%;
    }

    body {
      background-color: var(--text-color-hover);
      color: var(--text-color);
      font-family: "PingFang SC", "Open Sans", "Microsoft YaHei", sans-serif;
      transition: background-color 0.5s, color 0.5s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    .dark-mode body {
      background-color: #2a2a2a;
    }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    a {
      text-decoration: none;
      color: var(--text-color-gray);
      transition: all 0.5s ease;
    }

    a:hover {
      color: var(--text-color);
    }

    .ico {
      margin: 4rem 2rem;
      font-size: 6rem;
      color: var(--text-color-gray);
    }

    .ico img {
      width: 300px;
      height: 300px;
    }

    .title {
      font-size: 2rem;
      font-weight: bold;
    }

    .text {
      margin: 1rem;
    }

    .control button {
      background-color: var(--text-color-hover);
      border: var(--text-color) solid;
      border-radius: 4px;
      padding: 0.5rem 1rem;
      transition: all 0.5s ease;
      margin: 1rem 0.2rem;
      color: var(--text-color);
      cursor: pointer;
    }

    .control button:hover {
      border: var(--text-color) solid;
      background: var(--text-color);
      color: var(--text-color-hover);
    }

    .control button i {
      margin-right: 6px;
    }

    footer {
      line-height: 1.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 140px;
    }

    footer .social {
      color: var(--icon-color);
      font-size: 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    footer .social i {
      margin: 0 12px;
    }

    footer .point::before {
      content: "·";
      color: var(--text-color-gray);
    }

    .power,
    .icp {
      font-size: 14px;
    }
  </style>
</head>

<body>
  <main>
    <div class="ico">
      <img src="./favicon.png" alt="logo">
    </div>
    <div class="title">UNM-Server</div>
    <div class="text">服务已正常运行</div>
    <div class="control">
      <button onclick="clickFunction()">
        <i class="fa-solid fa-vial"></i>
        <span>测试接口</span>
      </button>
      <!-- <button onclick="window.open(`https://www.apifox.cn/apidoc/shared-ed2f1803-746b-42bb-8321-b0f0bbc6634c`)">
        <i class="fa-solid fa-book"></i>
        <span>接口文档</span>
      </button> -->
    </div>
  </main>
  <footer>
    <div class="social">
      <i class="fa-brands fa-github" onclick="socialJump('github')"></i>
      <div class="point"></div>
      <i class="fa-solid fa-house" onclick="socialJump('home')"></i>
      <div class="point"></div>
      <i class="fa-solid fa-envelope" onclick="socialJump('email')"></i>
    </div>
    <div class="power">
      Copyright © 2020
      <script>
        document.write(" - " + new Date().getFullYear());
      </script>
      <a href="https://imsyy.top/" target="_blank">無名</a>
    </div>
    <div class="icp">
      <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2022018134号-1</a>
    </div>
  </footer>
  <script>
    // 跟随系统主题
    const darkModeMediaQuery = window.matchMedia(
      "(prefers-color-scheme: dark)"
    );
    const toggleDarkMode = (darkModeMediaQuery) => {
      if (darkModeMediaQuery.matches) {
        document.documentElement.classList.add("dark-mode");
      } else {
        document.documentElement.classList.remove("dark-mode");
      }
    };
    darkModeMediaQuery.addListener(toggleDarkMode);
    toggleDarkMode(darkModeMediaQuery);

    // 按钮事件
    const clickFunction = () => {
      window.location.href = "/test";
    };

    // 社交链接跳转
    const socialJump = (type) => {
      switch (type) {
        case "github":
          window.location.href = "https://github.com/imsyy/";
          break;
        case "home":
          window.location.href = "https://www.imsyy.top/";
          break;
        case "email":
          window.location.href = "mailto:one@imsyy.top";
          break;
        default:
          break;
      }
    };
  </script>
</body>

</html>